import React, { Component } from "react";
import AllHeader from "../header";
import { ProductOne } from "./productOne";
import { ProductTwo } from "./productTwo";
import { ProductTop } from "./productTop";
import AllFooter from "../footer";
import "./index.css"
export class Product extends Component {
  color=undefined
  scrollTop=0
  allPageFlash = () => {
    this.setState({});
  };
  Jump= (id) => {
    const element = document.getElementById(id);
    if(!element){return}
    const rect = element.getBoundingClientRect();  
    if(rect.top){
      window.scrollTo({
        top: rect.top + window.scrollY-70,
        behavior: "smooth"
      });
    }   
  };
  componentDidMount = () => {
    const urlParams = new URLSearchParams( window.location.search);
    this.Jump(urlParams.get("position"))
    window.addEventListener('scroll', this.handleScroll);  
  };
  componentWillUnmount() {  
    // 清理事件监听器以避免内存泄漏  
    window.removeEventListener('scroll', this.handleScroll);  
  }  
  handleScroll = () => {  
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;   
    // 在这里，你可以根据scrollTop的值执行任何操作  
    if(scrollTop>100){
      this.color="#10239e"

      if(this.scrollTop<=100){
        this.setState({})
      }
      this.scrollTop=scrollTop
    }
    else{
      this.color=undefined
      if(this.scrollTop>100){
        this.setState({})
      }
      this.scrollTop=scrollTop
    }
  }  

  render() {

    return (
      <>
        <AllHeader isWhite={true} color={this.color} allPageFlase={this.allPageFlash} />
        <ProductTop/>
        <ProductOne />
        <ProductTwo />
        <AllFooter/>
      </>
    );
  }
}
// export withRouter(MyComponent)